<template>
   <div class="app-container">

             <!--查询表单-->
       <div class="search-div">
          <el-form label-width="70px" size="small">
          <el-row>
             <el-col :span="24">
                <el-form-item label="器材名称">
                <el-input style="width: 100%" v-model="searchObj.name" placeholder="器材名称" clearable></el-input>
                </el-form-item>
             </el-col>
          </el-row>
          <el-row style="display:flex">
             <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
          </el-row>
          </el-form>
       </div>
 
       <!-- 工具条 -->
       <div class="tools-div">
          <!-- <el-button type="success" icon="el-icon-plus" size="mini" @click="add" :disabled="$hasBP('bnt.sysDevices.add')  === false">添 加</el-button> -->
          <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
        
          <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
       </div>
 
     
 
        <div class="app-container">
        <!-- 表格 -->
        <el-table
            v-loading="listLoading"
            :data="list"
            stripe
            border
            @selection-change="handleSelectionChange"
            style="width: 100%;margin-top: 10px;">
        
            <el-table-column type="selection"/>
        
            <el-table-column
                label="序号"
                width="70"
                align="center">
                <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
        
            <el-table-column prop="name" label="器材名称" />
            <el-table-column prop="useCount" label="当前使用" />
            <el-table-column prop="total" label="总数" />
            <el-table-column prop="createTime" label="创建时间" width="160"/>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
                <!-- <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" title="分配权限"/> -->
                </template>
            </el-table-column>
            </el-table>
     </div>
     
 
       <!-- 分页组件 -->
       <el-pagination
     :current-page="page"
     :total="total"
     :page-size="limit"
     style="padding: 30px 0; text-align: center;"
     layout="total, prev, pager, next, jumper"
     @current-change="fetchData"
   />
 
 <!-- 添加 /修改  根据是否有id,进行判断。-->
   <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
       <el-form ref="dataForm" :model="sysDevices" label-width="150px" size="small" style="padding-right: 40px;">
         <el-form-item label="器材名称">
           <el-input v-model="sysDevices.name"/>
         </el-form-item>
         <el-form-item label="当前使用">
           <el-input v-model="sysDevices.useCount"/>
         </el-form-item>
         <el-form-item label="总数">
           <el-input v-model="sysDevices.total"/>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
         <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
       </span>
 </el-dialog>
 
 
    </div>
 </template>
 
 
 <script>
 // 引入 role.js  
 import api from '@/api/sysDevices/devices.js'
 
 export default {
    data() {
       return {
          // 定义table的数据源、变量
          list:[],
          // 控制菊花展示true 或者 隐藏 fasle
          listLoading:true,
          // 当前页码
          page:1,
          // 每页条数
          limit:5,
          // 总记录条数
          total:0,
          // 搜索条件
          searchObj:{},
         // 控制弹窗的展示或隐藏 
           dialogVisible:false,
         // 传递的数据对象
           sysDevices:{},
         // 选中的数据
           selectValueData:[]
       }
    },
    created() {
       this.fetchData();
    },
    methods:{

     // 5、批量删除
     batchRemove(){
       // 判断是否有选中select
       if(this.selectValueData.length==0)
       {
          this.$message.warning('请选择要删除的记录！')
         return;
       }
         this.$confirm("此操作将永久删除, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
         var ids=[];
         for(var i=0;i<this.selectValueData.length;i++)
         {
           var obj= this.selectValueData[i];
           // 获取id值
           var id = obj.id;
           // 将id放进到数组中
          ids.push(id);
         }
         api.batchremoveId(ids)
           .then((response) => {
           // 提示
           this.$message({
             type: "success",
             message: "删除成功!",
           });
           // 刷新页面
           this.fetchData();
         });
       });
     },
     handleSelectionChange(selectValue){
     //  console.log(selectValue);
      this.selectValueData= selectValue;
     },
    
 
       // 4、根据单个id,删除
        // 删除操作
     removeDataById(id) {
       this.$confirm("此操作将永久删除, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
          // a.发送请求
         api.removeId(id)
           .then((res) => {
           // 提示
           this.$message({
             type: "success",
             message: "删除成功!",
           });
           // b.刷新页面
           this.fetchData();
         });
       });
     },
     
       //3、添加  +  修改
 
       // 根据id去回显角色信息
       edit(id){
         // 先查看是否有收到id
         // alert(id);
 
         // a.发送请求
         api.getDevicesById(id).then(res=>{
           // 查看显示数据
           // console.log(res);
           this.sysDevices=res.data;
            // c、打开弹框true
            this.dialogVisible=true;
         })
       },
 
       updateDevices(){
             // a、发送请求
             api.updateDevices(this.sysDevices).then(res=>{
               // console.log(res);
             // b、给出修改提示
             this.$message({
               type:'success',
               message:"修改成功！",
             })
             // c、关闭弹框
             this.dialogVisible=false;
             
             // d、再次刷新列表
             this.fetchData();
           })
         },
 
         //添加或者修改 具体功能
         saveOrUpdate(){
           if(this.sysDevices.id!=null){
             this.updateDevices();
           }else{
             this.addDevices();
           }
         },
         //实现添加功能
         addDevices(){
           api.saveDevices(this.sysDevices)
           .then(Response=>{
             this.$message({
               type:'success',
               message:"添加成功！",
             });
             // 一样的效果
             // this.$message.success('添加成功！');
             // 关闭弹框
             this.dialogVisible=false;
             // 刷新数据
             this.fetchData();
           })
         },
           //打开弹框
         add(){
           // 当打开弹框之前，清空文本框所有数据  
             this.sysDevices={};
             this.dialogVisible=true
           },
 
       // 2、重置
          resetData(){
             // 清空搜索条件
             this.searchObj={};
             // 再次刷新列表
             this.fetchData();
          },
       // 1、查找
          fetchData(page=1){
           this.page = page;
             // console.log(this.limit);
             console.log(this.page);
             api.getDevicesList(this.page,this.limit,this.searchObj).then(res=>{
                // 输出结果查看 
                // console.log(res);
                // 隐藏菊花展示
                this.listLoading=false;
                this.list=res.data.records;
                this.total=res.data.total;
             })
          }
    },
    
 }
 </script>
 
 <style>
 
 </style>